/**
 * 渠道列表项
 */
import React from 'react';
import { Avatar, Checkbox, Tag, Tooltip } from 'antd';
import classnames from 'classnames';
import AuthComponent from '@/utils/auth/AuthComponent';
import moment from 'moment';
import { Link } from '../../../components';
import styles from './index.less';
import { SelectMember } from '../../containers';

export default function ChannelItem({
    account = [],
    onAccountChange,
    data,
    disabled,
    onChange,
    previewLink = '',
    checked,
    ...rest
}) {
    const action = <Link to={previewLink}>预览</Link>;
    const currentAccount = data?.accountDetailVOList?.find(item => item.channelAccount === account[0]) || {};
    const { releaseStatus = data?.releaseStatus, abnormalCause = data?.abnormalCause } = currentAccount;
    const hasAccount = data?.channelType === 2;
    const abnormalCauseTagOther = data?.abnormalCause; // 非招聘网站的异常
    const abnormalCauseTagWeb = account.length === 1 ? abnormalCause : null; // 招聘网站的异常
    const abnormalCauseTag = hasAccount ? abnormalCauseTagWeb : abnormalCauseTagOther;

    const tagMap = {
        0: <Tag>未发布</Tag>,
        1: <Tag color="green">已发布</Tag>,
        2: <Tag color="blue">待审核</Tag>,
        3: <Tag>已下线</Tag>
    };

    // 招聘网站多账号时不显示状态
    const releaseStatusTag = data?.channelType === 2 && account.length !== 1 ? null : tagMap[releaseStatus];
    const time = moment(data?.latestReleaseTime).format('MM-DD HH:mm');
    const currentReleaseMsg = data.latestReleaseAccount ? `${time}/${data.latestReleaseAccount}` : '-';

    const showAccount = data?.channelType === 2 || data?.accountDetailVOList?.length !== 0;
    const showHunterUnauthorized = data?.channelType === 3 && !data?.accountAuthVOList?.length;

    return (
        <div className={classnames({ [styles.disabled]: disabled }, styles.wrap)} {...rest}>
            <div className={styles.left}>
                <div className={styles.logo}>
                    <Avatar shape="square" size={50} src={data?.logoUrl} />
                </div>
                <AuthComponent code="office:recruitment:channel:prepublish:edit">
                    <div className={styles.action}>{action}</div>
                </AuthComponent>
            </div>
            <div className={styles.right}>
                <div className={styles.header}>
                    <div className={styles.statusWrap}>
                        <div className={styles.name} title={data.channelName}>
                            {data.channelName}
                        </div>
                        <div className={styles.status}>
                            {releaseStatusTag}
                            {abnormalCauseTag && !disabled && (
                                <Tooltip title={abnormalCauseTag}>
                                    <Tag color="red">异常</Tag>
                                </Tooltip>
                            )}
                        </div>
                        {data.channelStatus === 0 && (
                            <div className={styles.status}>
                                <Tag>已禁用</Tag>
                            </div>
                        )}
                    </div>
                    {!disabled && <Checkbox onChange={onChange} checked={checked} disabled={showHunterUnauthorized} />}
                </div>
                <div className={styles.contentBox}>
                    <div className={styles.content}>
                        {showAccount && (
                            <div className={styles.title} title={data.name}>
                                账号/姓名：
                                <SelectMember
                                    data={data?.accountDetailVOList}
                                    value={account}
                                    onChange={onAccountChange}
                                />
                            </div>
                        )}
                        {showHunterUnauthorized ? (
                            <div className={styles.desc}>暂未授权</div>
                        ) : (
                            <>
                                <div className={styles.title}>次数：{data.dutyReleaseNum || '-'}</div>
                                <div className={styles.desc} title={currentReleaseMsg}>
                                    发布：{currentReleaseMsg}
                                </div>
                            </>
                        )}
                    </div>
                </div>
            </div>
        </div>
    );
}
